<script setup lang="ts">

import MyButton from "@/components/common/myButton.vue";
import {ref, watch} from "vue";
import {useRouter} from "vue-router";
import {handleFollowMe} from "@/api/path/tl/personal";
import {ElMessage} from "element-plus";
const router = useRouter();
interface userElementType {
  id: number,
  name: string,
  sex: string,
  education: string,
  school: string,
  skills: string,
  intro: string,
  in_enterprise: true,
  enterprise_id: 1,
  enterprise_name: string,
  enterprise_position: string,
  is_admin: true,
}
const elementData = ref<userElementType>({
  id: 0,
  name: "",
  sex: '',
  education: "",
  school: "",
  skills: "",
  intro: "",
  in_enterprise: false,
  enterprise_id: 0,
  enterprise_name: "",
  enterprise_position: "",
  is_admin: false,
})

const props = defineProps({
  data: {
    type: Object,
    require: true,
  }
});
watch(() => props, (newValue, oldValue) => {
  elementData.value = newValue.data
  console.log(elementData.value)
}, {deep: true, immediate: true});
const handleToUser = (id: string) => {
  router.push({
    path: '/personalinfo',
    query: {
      id: id
    }
  })
}
const handleToEnterprise = (id: string) => {
  router.push({
    path: '/enterprise',
    query: {
      enterpriseId: id
    }
  })
}
const handleFollow = (id: string) => {
  handleFollowMe(id).then(res => {
    if (res.errno == 1) {
      ElMessage.success('关注成功')
    }
  }).catch(err => {
    ElMessage.error(res.msg)
  })
}

const toChat = (id: number) => {
  router.push({path: "/chat", query: {id: id} });
}
</script>

<template>
  <span style="display: flex; flex-direction: column">
    <span style="display: flex; align-items: flex-end; flex-direction: row;">
      <span class="clickable user-name" style="margin-right: 5px" @click="handleToUser(elementData.id)">{{ elementData.name }}</span>
      <span class="clickable secondary-info" @click="handleToEnterprise(elementData.enterprise_id)">{{ elementData.enterprise_name }}</span>
      <span class="secondary-info"><span style="margin: 0 2px">·</span>{{ elementData.enterprise_position }}</span>
    </span>
    <span class="secondary-info" style="display: flex; flex-direction: row">
      <el-icon style="width: 20px; height: 20px"><School style="font-size: 20px;"/></el-icon>
      <span class="secondary-info">{{ elementData.school + " " + elementData.education }}</span>
    </span>
    <span class="intro">{{ elementData.intro }}</span>
  </span>
  <span style="display: flex; width: 170px; justify-content: space-between">
    <my-button type="light" :width="80" @click="toChat(elementData.id)">聊天</my-button>
    <my-button type="light" :width="80" @click="handleFollow(elementData.id)">关注</my-button>
  </span>

</template>

<style scoped>

.user-name {
  font-size: var(--font-size-large);
  font-weight: 600;
}
.secondary-info {
  font-size: var(--font-size-small);
  color: grey;
  display: flex;
  white-space: nowrap; /*禁止换行*/
}
.intro {
  font-size: 12px;
}
.clickable:hover {
  cursor: pointer;
  color: var(--color-primary);
  text-decoration: underline;
}
</style>